@import '../../sheet-container/index.module.less';

@padding-left-right: 24px;
@line-height: 20px;

.sheet-bar-menu {
    max-height: calc(100vh - @sheet-footer-bar-height);
    display: grid;
    gap: var(--margin-xxs);
    align-items: center;
    overflow-y: auto;

    box-sizing: border-box;
    margin: 0;
    padding: var(--padding-sm);

    background-color: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg);

    li {
        list-style: none;
    }

    &-item {
        cursor: pointer;

        position: relative;

        display: flex;

        box-sizing: border-box;
        padding: var(--padding-xs) @padding-left-right;

        color: rgb(var(--text-color));

        border-radius: var(--border-radius-base);

        transition: background 0.2s;

        &:hover {
            background-color: rgb(var(--bg-color-hover));
        }

        &-icon {
            position: absolute;
            top: 50%;
            left: var(--margin-xxs);
            transform: translateY(-50%);

            color: transparent;
        }

        &-hide &-icon {
            display: flex;
            align-items: center;
            justify-content: center;

            width: 16px;
            height: 16px;

            color: rgb(var(--grey-400));
        }

        &-select {
            font-weight: 500;
            color: rgb(var(--primary-color));
        }

        &-select &-icon {
            display: flex;
            align-items: center;
            justify-content: center;

            width: 16px;
            height: 16px;

            color: rgb(var(--primary-color));
        }

        &-label {
            font-size: var(--font-size-xs);
            font-weight: 400;
            line-height: @line-height;
            display: flex;
            align-items: center;
        }
    }
}
